<template>
	<view> 
		<view class="tabView">
			<view :class="tabCurrent==ind?'tabC':'tab'" v-if="" @click="tab(ind)" v-for="(item,ind) in orderTypeList">
				{{item}}
			</view>
		</view>
		<view class="orderList">
			<view class="order" v-for="(item,ind) in orderList">
				<view class="title">
					<text>订单编号：{{item.id}}</text>
					<uni-icons @click="toInfo(item.id)" type="right" size="18"></uni-icons>
				</view>
				<view class="bodyView">
					<view class="Info">
						<view class="">服务项目：{{item.service}}</view>
						<view class="">服务门店：{{item.doorName}}
							<uni-icons  color="#2979ff" :size="20" type="paperplane-filled"
								size="18"></uni-icons>
						</view>
						<view class="">下单时间：{{item.time}}</view> 
					</view>
					<view class="status">{{orderTypeList[item.status]}}</view>
				</view> 
				<view class="foot">
					<view class="">实付：{{item.price}}元</view>
					<view class="buttonView">
						<button class="mini-btn">立即评价</button>
						<button class="mini-btn" type="primary">再来一单</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderTypeList: ["全部", "待支付", "待使用", "待评价"],
				tabCurrent: 0,
				orderList: [{}]
			}
		},
		onLoad() { 
			this.getOrderList()
		},
		methods: {
			toInfo(id) {
				uni.navigateTo({
					url: "/packagesOrder/orderInfo/orderInfo?id="+id
				})
			},
			tab(index) {
				this.tabCurrent = index
			},
			// 获取所有的订单
			getOrderList() {
				this.orderList = [{
					"id": 1234567,
					"service": "车辆保养",
					"doorName": "沪爷冲击！",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status":1,
				},{
					"id": 1234567,
					"service": "车辆保养",
					"doorName": "东史马汽修站点",
					"time": "2025-01-06 14:29",
					"price": 180.94,
					"status":1,
				},{
					"id": 1234567,
					"service": "车辆保养",
					"doorName": "沪爷冲击！",
					"time": "2025-01-05 10:29",
					"price": 224.34,
					"status":2,
				},{
					"id": 1234567,
					"service": "车辆保养",
					"doorName": "沪爷冲击！",
					"time": "2025-01-05 10:29",
					"price": 235.67,
					"status":3,
				}]
			}
		}
	}
</script>
<style>
	/* 底部付款金额和按钮 */
	.buttonView>button:nth-child(1) {
		background-color: #c7c9ce;
		color: #fff;
	}

	.mini-btn {
		font-size: 22rpx;
		margin-left: 20rpx;
		padding: 0 25rpx;
	}

	.buttonView {

		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

	.foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
	}

/* 中部主要内容 */
	.Info {
		line-height: 60rpx;
		padding-top: 20rpx;
	}
	.status{
		color: #2979ff;
		font-weight: bold;
		padding-right: 50rpx;
	}
	.statusA{
		
	}
	.bodyView{
		font-size: 28rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between; 
		align-items: center;
		border-bottom: #f0f0f0 4rpx solid;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	/* 订单编号 */

	.title {
		border-bottom: #f0f0f0 5rpx solid;
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}

	.title>.uni-icons {
		font-weight: 100;
	}

	.order {
		/* height: 400rpx; */

		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.orderList {
		padding-top: 10rpx;
		margin: 0 auto;
		/* width: 720rpx; */
	}

	/* 顶部tab */
	.tabView {
		display: flex;
		font-size: 34rpx;
		justify-content: space-around;
		color: #fff;
		margin-top: 10rpx;
	}

	.tab {
		padding: 10rpx;
	}

	.tabC {
		padding: 10rpx;
		border-bottom: #fff 4rpx solid;
	}
</style>